import { Card, Table } from "antd";
import { ColumnsType } from "antd/lib/table";
import { useState } from "react";
import { useParams } from "react-router-dom";

const tableColumns: ColumnsType<any> = [
    {
        title: "名称",
        key: "name",
        dataIndex: ["component", "name"],
        onHeaderCell: () => { return { style: { "fontWeight": "bold", "whiteSpace": "nowrap" } } },
        onCell: () => { return { style: { "minWidth": "12em" } } },
    },
    {
        title: "组件",
        key: "comments",
        dataIndex: ["component", "comments"],
        width: "100%",
        onHeaderCell: () => { return { style: { "fontWeight": "bold", "whiteSpace": "nowrap" } } },
    },
    {
        title: "类型",
        key: "comments",
        dataIndex: ["component", "comments"],
        width: "100%",
        onHeaderCell: () => { return { style: { "fontWeight": "bold", "whiteSpace": "nowrap" } } },
    },
    {
        title: "状态",
        key: "comments",
        dataIndex: ["component", "comments"],
        width: "100%",
        onHeaderCell: () => { return { style: { "fontWeight": "bold", "whiteSpace": "nowrap" } } },
    },
];

export default function Component() {
    const { id } = useParams<{ id: string }>();
    const [dataSource, setDataSource] = useState<any[]>([]);

    return (<>
        <Card>
            <h1>任务详情</h1>
        </Card>
        <Card>
            <Table
                columns={tableColumns}
                rowKey="id"
                dataSource={dataSource}
                loading={!dataSource}
            />
        </Card>
    </>);
}